<template>
  <vue-slider @change="changeSlider" v-model="value" />
</template>
<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/antd.css'
export default {
  name: "add",
  components: {
    VueSlider
  },
  data() {
    return {
      value: 0,
    }
  },
  created() {},
  mounted() {

  },
  methods: {
    setPercentValue(val) {
      this.value = val
    },
    changeSlider() {
      this.$emit('change', this.value)
    }
  },
};
</script>
<style lang="scss">
  .vue-slider-process{
    background-color: #409EFF;
  }
  .vue-slider-dot-handle{
    // display: none;
    color: #409EFF;
    background-color: #409EFF;
    outline: none;
    border: none;
  }
  .vue-slider-dot-tooltip{
    display: none;
  }
  .vue-slider-dot{
    width: .2rem !important;
    height: .2rem !important;
  }
</style>

